@charset "utf-8";
.main {padding:30px;font-family: 'Microsoft Yahei';}
section {float: left;width:200px;}
section h2 {font-size:16px;font-weight: normal;color: #333;}
.yui-select {width:100%;margin-top: 5px;}
.tree-box {float:left;width:510px;font-size: 12px;margin-left:50px;}
.tree-box h3 {font-size:20px;font-weight: normal;border-bottom: 1px dashed #ccc;height:30px;line-height: 30px;margin-bottom: 30px;}
.tree-box h3 span {display:inlien-block;background: #fff;height: 30px;position: relative;top:14px;padding:0 10px 0 10px;border-left:5px solid #ddd;}
.tree-box .hd {margin-bottom: 30px;position: relative;}
.tree-box .hd:before {content: "";position: absolute;width:342px;height: 2px;background: #b7b7b7;bottom:-30px;left:85px;}
.tree-box .hd:after {content: "";position: absolute;width: 2px;height: 28px;background: #b7b7b7;left:255px;bottom:-28px;}
.tree-box .ft {margin:30px 0 50px;position: relative;}
.tree-box .ft:before {content: "";position: absolute;width:342px;height: 2px;background: #b7b7b7;top:-30px;left:85px;}
.tree-box .ft:after {content: "";position: absolute;width: 2px;height: 28px;background: #b7b7b7;left:255px;top:-28px;}
.tree-box .hd p,.tree-box .ft p {margin:0 auto;height: 60px;}
.tree-box .bd div {position: relative;
	-webkit-flex-direction:column;
	flex-direction:column;
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
.tree-box .bd div:before {content: "";position: absolute;width: 2px;height: 100%;top:0;left:85px;background: #b7b7b7;}
.tree-box .bd .nodata:before {background: none;}
.tree-box p {width:150px;height:50px;margin:15px 10px;}
.tree-box p span {background: #838994;color: #fff;width:100%;height:100%;line-height: 1.5em;border-radius:3px;text-align: center;box-shadow: 1px 1px 5px rgba(0,0,0,.3);
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.tree-box .hd p span,.tree-box .ft p span {font-size:16px;border-radius: 50%;}
.tree-box .hd p span {background: #ffac3a;}
.tree-box .ft p span {background: #d23f4f;}
.tree-box .bd p span,.tree-box .ft p span {position: relative;}
.tree-box .bd p span:after,.tree-box .ft p span:after {content: "";position: absolute;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #b7b7b7;top:-8px;left:68px;}

